<template>
  <el-row>
    <el-col :span="24" :xs="0">
      <el-carousel height="auto" arrow="never" indicator-position="none">
        <el-carousel-item style="height: 480px">
          <img src="@/assets/user/01首页/972d1313f7656df87dcc7da75fbaefd1_.png"
               style="object-fit: cover;width: 100%;height: 100%"
               alt="">
        </el-carousel-item>
        <el-carousel-item style="height: 480px">
          <img src="@/assets/user/01首页/c51aeb48042ff1241a33f69b993d8d80_.png"
               style="object-fit: cover;width: 100%;height: 100%"
               alt="">
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <el-col :span="0" :xs="24">
      <el-carousel height="auto" arrow="never">
        <img src="@/assets/user/01首页/01宏意星官网-首页_02.png" style="object-fit: cover;width: 100%;height: 100%"
             alt="">
        <div class="carouse-overlay" style="top: 50px;left: 20px;right: 60px">
          <div style="color: #ffcd6c;font-size: 46px">IT专业运维服务</div>
          <div style="font-size: 20px;color: #fff;margin-top: 10px">成熟的支持架构，专业的服务团队，覆盖全国的服务网络
          </div>
          <div style="font-size: 20px;color: #fff;margin-top: 10px">借鉴国际性企业的先进管理方式，共享支持资源</div>
        </div>
      </el-carousel>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24" :xs="0">
      <div class="introduce2" style="cursor: pointer;" @click="toProduct(1)">
        <img src="@/assets/user/01首页/bc455631e6be7a3e2aafb80f0af740c3_.png"
             style="object-fit: cover;width: 100%;height: 100%"
             alt="">
      </div>
    </el-col>
    <el-col :span="0" :xs="24">
      <div class="introduce" style="height: 1000px;width: 100%">
        <img src="@/assets/user/01首页/宏意星官网-首页_19.jpg" style="object-fit: cover;height: 100%;width: 100%"
             alt="Mobile intelligent products">
        <div class="introduce-overlay" style="top:10px;left: 20px;width: 90%">
          <div style="font-size: 34px;color: #323232;font-weight: bold">公司介绍</div>
          <div style="font-size: 20px;color: #676765;margin-top: 10px">COMPANY PROFILE</div>
          <div style="font-size: 20px;color: #676765;margin-top: 20px">
            广州市宏意星计算机系统服务有限公司成立于2002年，是国内最早进入IT服务领域的服务商之一，公司旗下资源多次为多层面的客户提供专业的IT代维服务，在全国拥有近300多名专业技术人员，产品专利2项，PCT
            1项，软件著作权43项。2016年和2020年荣获“高新技术企业”认定，并于2024年1月取得了人力资源服务及劳务派遣双证许可。公司主营业务涵盖信息技术服务、人力资源服务、智慧业务、创新驱动等领域，具备端到端“软件+服务”综合业务能力和服务优势。
          </div>
          <div style="font-size: 20px;color: #676765;margin-top: 20px">
            2023年底，公司在香港设立子公司“宏意星数智化服务有限公司”，将利用香港的优势资源，使公司的业务得到进一步拓展。
          </div>
          <div class="stats">
            <div style="width: 150px">
              <div class="top" style="font-weight: bold">300+</div>
              <div class="bottom">全国拥有300多名专业技术人员</div>
            </div>
            <div style="width: 150px">
              <div class="top" style="font-weight: bold">PCT</div>
              <div class="bottom">PCT 1项</div>
            </div>
          </div>
          <div class="stats">
            <div style="width: 150px">
              <div class="top" style="font-weight: bold">43项</div>
              <div class="bottom">软件著作权43项</div>
            </div>
            <div style="width: 150px">
              <div class="top" style="font-weight: bold">2项</div>
              <div class="bottom">产品专利2项</div>
            </div>
          </div>
          <button @click="toProduct(1)">了解更多</button>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24" :xs="0">
      <div class="products-services" style="margin: 50px 0;">
        <div style="font-size: 36px;color: #323232;font-weight: bold">产品与服务</div>
        <div style="font-size: 20px;color: #676765;margin-top: 10px">PRODUCTS AND SERVICES</div>
        <div style="display: flex;margin: 50px auto 0 auto;width: 80%">
          <div style="margin-right: 20px">
            <img src="@/assets/user/01首页/1175f60f7e8a1ee337752b147a2d07f3_.jpg"
                 style="object-fit: cover;width: 100%;height: 100%"
                 @click="toProduct(2)"
                 alt="">
          </div>
          <div>
            <img src="@/assets/user/01首页/8ff43669d8cd5ba9b16be6a546ed1795_.png"
                 style="object-fit: cover;width: 100%;height: 100%"
                 @click="toProduct(1)"
                 alt="">
          </div>
        </div>
        <div style="display: flex;margin: 10px auto;width: 80%">
          <div style="margin-right: 20px">
            <img src="@/assets/user/01首页/cd1c81d487bbbd86c307ba5adf70f933_.png"
                 style="object-fit: cover;width: 100%;height: 100%"
                 @click="toProduct(3)"
                 alt="">
          </div>
          <div>
            <img src="@/assets/user/01首页/1243c05d514cefb40c54ef17d353d1d4_.jpg"
                 style="object-fit: cover;width: 100%;height: 100%"
                 @click="toIntroduce"
                 alt="">
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="0" :xs="24">
      <div class="products-services">
        <div style="font-size: 36px;color: #323232;font-weight: bold">产品与服务</div>
        <div style="font-size: 20px;color: #676765;margin-top: 10px">PRODUCTS AND SERVICES</div>
        <div>
          <div class="product" style="margin-top: 20px;width: 100%" @click="toProduct(2)">
            <img src="@/assets/user/01首页/宏意星官网-首页_22.jpg" style="object-fit: contain;width: 100%"
                 alt="Mobile intelligent products">
            <div class="overlay" style="left: 20px;bottom: 20px">
              <div style="color: #fff;font-size: 26px">移动智能产品</div>
              <div style="font-size: 18px;color: #fff">Mobile intelligent products</div>
            </div>
          </div>
          <div class="product" style="margin-top: 20px" @click="toProduct(1)">
            <img src="@/assets/user/01首页/宏意星官网-首页_10.png" style="object-fit: contain"
                 alt="IT professional operation and maintenance services">
            <div class="overlay" style="left: 20px;bottom: 20px">
              <div style="color: #fff;font-size: 26px">IT专业运维服务</div>
              <div style="font-size: 18px;color: #fff">IT professional operation and maintenance services</div>
            </div>
          </div>
          <div class="product" style="margin-top: 20px" @click="toProduct(3)">
            <img src="@/assets/user/01首页/宏意星官网-首页_11.png" style="object-fit: contain"
                 alt="Smart City Platform">
            <div class="overlay" style="left: 20px;bottom: 20px">
              <div style="color: #fff;font-size: 26px">智慧城市平台</div>
              <div style="font-size: 18px;color: #fff">Smart City Platform</div>
            </div>
          </div>
          <div class="product" style="margin-top: 20px" @click="toIntroduce">
            <img src="@/assets/user/01首页/宏意星官网-首页_31.jpg" style="object-fit: contain" alt="Learn more">
            <div class="overlay" style="left: 20px;bottom: 20px">
              <div style="color: #fff;font-size: 26px">了解更多</div>
              <div style="font-size: 18px;color: #fff">Learn more</div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24" :xs="0">
      <div class="customers-partners">
        <div style="font-size: 36px;color: #323232;font-weight: bold">主要客户与合作伙伴</div>
        <div style="font-size: 20px;color: #676765;margin-top: 10px">MAJOR CUSTOMERS AND PARTNERS</div>
        <img src="@/assets/user/01首页/80beabd0dfad4914f8b7b39cb65270ad_.jpg" style="margin-top: 50px">
      </div>
    </el-col>
    <el-col :span="0" :xs="24">
      <div class="customers-partners">
        <div style="font-size: 36px;color: #323232;font-weight: bold">主要客户与合作伙伴</div>
        <div style="font-size: 20px;color: #676765;margin-top: 10px">MAJOR CUSTOMERS AND PARTNERS</div>
        <img src="@/assets/user/01首页/80beabd0dfad4914f8b7b39cb65270ad_.jpg" style="margin-top: 50px;width: 100%">
      </div>
    </el-col>
  </el-row>

</template>

<script setup>
import {useRouter} from "vue-router";
import {inject} from "vue";

let router = useRouter();
let changeActiveTab = inject("changeActiveTab");

function toIntroduce() {
  changeActiveTab("/introduce")
}

function toProduct(tabIndex) {
  changeActiveTab("/productAndService")
  localStorage.setItem("tab2", tabIndex)
}

</script>

<style scoped>

.stats {
  display: flex;
  margin: 30px 0;

  div {
    .top {
      font-size: 34px;
      color: #e60012
    }

    .bottom {
      margin-top: 10px;
      font-size: 16px;
      color: #676765
    }
  }

}

button {
  width: 100px;
  padding: 10px 20px;
  background: red;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.products-services {
  text-align: center;
}

.products-services h1 {
  font-size: 36px;
  margin-bottom: 5px;
}

.products-services h2 {
  font-size: 18px;
  color: #777;
  margin-bottom: 20px;
}

.product {
  position: relative;
}

.product img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

.introduce-overlay {
  position: absolute;
  color: #333;
}

.carouse-overlay {
  position: absolute;
  color: #fff;
}

.overlay {
  position: absolute;
  bottom: 45px;
  left: 40px;
  color: #fff;
  padding: 10px;
  border-radius: 0 0 8px 8px;
  text-align: left;
}

.customers-partners {
  margin: 50px 0;
  text-align: center;
}

.customers-partners h1 {
  font-size: 36px;
  margin-bottom: 5px;
}

.customers-partners h2 {
  font-size: 18px;
  color: #777;
  margin-bottom: 20px;
}

</style>